<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>钢琴应用</title>
    <style>
        body { 
            margin: 0; padding: 0; 
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            touch-action: manipulation; 
            -webkit-user-select: none; 
            user-select: none; 
            height: 100vh;
            overflow: hidden;
        }
        
        .container {
            padding: 20px;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .piano {
            flex: 1;
            background: #2c3e50;
            border-radius: 15px;
            position: relative;
            margin-bottom: 20px;
        }
        
        .white-keys {
            display: flex;
            height: 70%;
            position: absolute;
            bottom: 0;
            left: 10px;
            right: 10px;
        }
        
        .white-key {
            flex: 1;
            background: white;
            border: 1px solid #ddd;
            border-radius: 0 0 8px 8px;
            margin: 0 2px;
            touch-action: none;
        }
        
        .black-keys {
            position: absolute;
            top: 0;
            left: 10px;
            right: 10px;
            height: 45%;
        }
        
        .black-key {
            position: absolute;
            background: black;
            width: 6%;
            height: 100%;
            border-radius: 0 0 5px 5px;
        }
        
        .controls {
            padding: 15px;
            background: rgba(0,0,0,0.8);
            border-radius: 10px;
            display: flex;
            justify-content: space-around;
        }
        
        .btn {
            padding: 12px 20px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="piano">
            <div class="white-keys" id="whiteKeys"></div>
            <div class="black-keys" id="blackKeys"></div>
        </div>
        
        <div class="controls">
            <button class="btn" onclick="initAudio()">🎵 启用音频</button>
            <button class="btn" onclick="toggleRecord()">● 录制</button>
            <button class="btn" onclick="playRecorded()">▶ 播放</button>
        </div>
    </div>

    <script>
        // 简化的钢琴实现
        const notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B', 'C2'];
        let audioContext = null;
        
        function initPiano() {
            const whiteKeys = document.getElementById('whiteKeys');
            notes.forEach((note, i) => {
                const key = document.createElement('div');
                key.className = 'white-key';
                key.onclick = () => playNote(note);
                key.ontouchstart = (e) => { e.preventDefault(); playNote(note); };
                whiteKeys.appendChild(key);
            });
        }
        
        function initAudio() {
            try {
                audioContext = new (window.AudioContext || window.webkitAudioContext)();
                alert('音频已启用！点击琴键开始演奏');
            } catch (e) {
                alert('音频初始化失败: ' + e.message);
            }
        }
        
        function playNote(note) {
            if (!audioContext) {
                alert('请先启用音频！');
                return;
            }
            
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.type = 'sine';
            oscillator.frequency.value = 261.63 * (notes.indexOf(note) + 1);
            
            gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 1.0);
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            oscillator.start();
            oscillator.stop(audioContext.currentTime + 1.0);
        }
        
        window.onload = initPiano;
    </script>
</body>
</html>